<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
</head>
<body>
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<div id="main3" style="width: 600px;height:400px;"></div>
<script type="text/javascript"  src="${pageContext.request.contextPath}/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript"  src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main1'));
myChart.setOption({
	 title: {
	        text: '建筑年代统计',
	        subtext: '年代统计',
	        left: 'center'
	    },
	    tooltip: {
	        trigger: 'item',
	        formatter: '{a} <br/>{b} : {c} ({d}%)'
	    },
	    legend: {
	        type: 'scroll',
	        orient: 'vertical',
	        right: 10,
	        top: 20,
	        bottom: 20,
	        data: ['60年代','70年代','80年代','90年代','00年代','10年代','20年代'],

	        //selected: data.selected
	    },
	    series: [
	        {
	            name: '年代',
	            type: 'pie',
	            radius: '55%',
	            center: ['40%', '50%'],
	            data: [          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:235, name:'60年代'},
                    {value:274, name:'70年代'},
                    {value:310, name:'80年代'},
                    {value:335, name:'90年代'},
                    {value:400, name:'00年代'},
                    {value:400, name:'10年代'},
                    {value:400, name:'20年代'}
                ],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
})


</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main2'));
myChart.setOption({
	 title: {
	        text: '房屋产别统计',
	        subtext: '产别统计',
	        left: 'center'
	    },
	    tooltip: {
	        trigger: 'item',
	        formatter: '{a} <br/>{b} : {c} ({d}%)'
	    },
	    legend: {
	        type: 'scroll',
	        orient: 'vertical',
	        right: 10,
	        top: 20,
	        bottom: 20,
	        data: ['60年代','70年代','80年代','90年代','00年代','10年代','20年代'],

	        //selected: data.selected
	    },
	    series: [
	        {
	            name: '年代',
	            type: 'pie',
	            radius: '55%',
	            center: ['40%', '50%'],
	            data: [          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:235, name:'60年代'},
                    {value:274, name:'70年代'},
                    {value:310, name:'80年代'},
                    {value:335, name:'90年代'},
                    {value:400, name:'00年代'},
                    {value:400, name:'10年代'},
                    {value:400, name:'20年代'}
                ],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
})

</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main3'));
myChart.setOption({
	 title: {
	        text: '房屋产别统计',
	        subtext: '产别统计',
	        left: 'center'
	    },
	    tooltip: {
	        trigger: 'item',
	        formatter: '{a} <br/>{b} : {c} ({d}%)'
	    },
	    legend: {
	        type: 'scroll',
	        orient: 'vertical',
	        right: 10,
	        top: 20,
	        bottom: 20,
	        data: ['60年代','70年代','80年代','90年代','00年代','10年代','20年代'],

	        //selected: data.selected
	    },
	    series: [
	        {
	            name: '年代',
	            type: 'pie',
	            radius: '55%',
	            center: ['40%', '50%'],
	            data: [          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:235, name:'60年代'},
                    {value:274, name:'70年代'},
                    {value:310, name:'80年代'},
                    {value:335, name:'90年代'},
                    {value:400, name:'00年代'},
                    {value:400, name:'10年代'},
                    {value:400, name:'20年代'}
                ],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
})

</script>
</body>
</html>